<template>
  <div class="block">
    <CommonTop title="归档"></CommonTop>
    <div class="content w">
      <el-card class="card">
        <div class="articleList">
          <el-timeline>
            <el-timeline-item
              :type="type[Math.round(Math.random() * 4)]"
              placement="top"
            >
              <span>{{ "总共" + total + "篇文章,，继续加油" }}</span>
            </el-timeline-item>
            <el-timeline-item
              :type="type[Math.round(Math.random() * 4)]"
              placement="top"
              v-for="(item, index) in articleList"
              :key="index"
              @click.native="toArticleDetail(item.id)"
              :timestamp="item.createTime"
            >
              {{ item.title }}
            </el-timeline-item>
          </el-timeline>
        </div>
        <div class="page">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            @current-change="currentChange"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import CommonTop from "@/components/CommonTop.vue";
export default {
  data() {
    return {
      articleList: [],
      total: 0,
      type: ["primary", "success", "success", "danger", "info"],
      current: 1,
      pageSize: 10,
    };
  },
  methods: {
    init() {
      let param = {
        current: this.current,
        pageSize: this.pageSize,
      };
      this.postRequest("/api/article/home/merge", param).then((res) => {
        this.articleList = res.data.recodes;
        this.total = res.data.total;
      });
    },
    currentChange(current) {
      this.current = current;
      this.init();
    },
    toArticleDetail(id) {
      this.$router.push({
        name: "article",
        params: {
          id: id,
        },
      });
    },
  },
  created() {
    this.init();
  },
  components: {
    CommonTop,
  },
};
</script>

<style lang="less" scoped>
.content {
  margin-top: 40px;
}
.el-timeline {
  font-size: 18px;
}
.card {
  position: relative;
  width: 100%;
}
.el-timeline-item {
  border-bottom: 1px solid #dbdde0;
}
.el-timeline-item:hover {
  cursor: pointer;
}
.articleList {
  margin-bottom: 48px;
}
.page {
  position: absolute;
  bottom: 18px;
  right: 50%;
  transform: translateX(50%);
}
</style>